<template>
  <div class="carouselbg">
    <div class="butt" @click="prev"><el-icon color="#fb6d62">
        <ArrowLeftBold />
      </el-icon></div>
    <el-carousel indicator-position="outside" arrow="never" height="22em" class="carousel" ref="carousel">
      <el-carousel-item v-for="item in carouselItems" :key="item" class="carousel-each">
        <div class="carousel-contain">
          <!-- <img :src="'/Uploads/' + item.File" class="carousel-image" @click="clickCarousel(item)" /> -->
          <img :src="item.File" class="carousel-image" @click="clickCarousel(item)" />
          <div class="text-area-title font-xbs">{{ item.Name }}</div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="butt" @click="next"><el-icon color="#fb6d62">
        <ArrowRightBold />
      </el-icon></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import getCarousel from '@/api/getCarousel'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'

const carousel = ref();
const carouselItems = ref();
const { carouseling } = getCarousel();
const router = useRouter();

onMounted(async () => {
  // const data = await carouseling();
  // carouselItems.value = data.list;
  carouselItems.value = [
    {
      ID: 1,
      File: 'https://www.xjtu.edu.cn/images/23/83704.jpg',
      Name: '求是',
      Url: 'https://news.xjtu.edu.cn/info/1033/201143.htm'
    },
    {
      ID: 2,
      File: 'https://www.xjtu.edu.cn/images/14/12/11/1tf5znre9c/20231118011.jpg',
      Name: '西安交大召开大学文化和文明校园建设工作会',
      Url: 'https://news.xjtu.edu.cn/info/1033/204651.htm'
    },
    {
      ID: 3,
      File: 'https://www.xjtu.edu.cn/images/jdgk.jpg',
      Name: '西安交通大学',
      Url: 'https://www.xjtu.edu.cn/jdgk/jdjj.htm'
    }
  ]
})

function prev() {
  carousel.value.prev();
}

function next() {
  carousel.value.next();
}

function clickCarousel(item: any) {
  // if (item.ID != 0) {
  //   routerTo(item.ID)
  // } else {
    window.open(item.Url)
  //}
}

const routerTo = (path: string) => {
  if (path != '') {
    router.push(`article/${path}`)
  } else {
    ElMessage({
      showClose: true,
      message: '未能找到文章地址',
      type: 'error',
    })
  }
}
</script>

<style scoped>
.carousel-image {
  width: 100%;
  object-fit: contain;
  height: 100%;
  cursor: pointer;
}

.carouselbg {
  height: 80%;
  width: 100%;
  max-width: 1920px;
  margin-top: 80px;
  background-image: url(/assets/imgs/carouselbg.jpg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: contain;
  /* background-color: orange; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.carousel {
  width: 50%;
  border-radius: 5px;
  position: relative;
}

.carousel-each {
  /* background-image: url(/assets/imgs/carouselpic.png); */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  justify-content: center;
  align-items: center;
  display: flex;
  /* position: relative; */
}

:deep(.el-carousel__button) {
  height: 10px;
  width: 10px;
  border-radius: 9999999px;
}

:deep(.is-active>button) {
  background-color: #f5900a;
}

.butt {
  background-color: white;
  border-radius: 100%;
  height: 50px;
  width: 50px;
  box-shadow: #475669 1px 1px;
  margin: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-area-title {
  background: linear-gradient(to bottom, #88888869, #000000e7);
  width: calc( 100% - 20px );
  height: fit-content;
  position: absolute;
  display: flex;
  align-items: center;
  color: white;
  font-size: 25px;
  font-weight: 600;
  padding: 10px;
  bottom: 0;
  left: 0;
}

.carousel-contain {
  height: 100%;
  position: relative;
}
</style>